<html>
  <head>
	<link rel="stylesheet" type="text/css" href="jquery.editable-list.css" />
  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="jquery.editable-list.js"></script>
  
  <style>
    body { font: 10pt sans-serif; background:#f0f0f7;}
  </style>
	
	<script type="text/javascript">
  
    function isEmail(email) { 
        var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(email);
    }  
		
		$(function() {
    
      $('editable-list').editablelist()
                     .on('change', function(e) { console.log("changed", this.value);});
                     
      $('editable-list[name=tags3]')[0].validator = isEmail; 
      
      console.log($('editable-list[name=tags2]').val()); 
                     
  	});
			
	
	</script>
  </head>
  <body>
		<form>
			<p><label>Defaults:</label>
			<editable-list name="tags1" value="foo,bar,baz"/></p>
			
			<p><label>Technologies:</label>
			<editable-list name="tags2" value="John,Julia,William,Adam" placeholder="add a friend"/></p>
			
			<p><label>Emails:</label>
			<editable-list name='tags3' type="email" value="foo@bar.baz" placeholder="add an email" /></p>
			
		</form>
  </body>
</html>